<template>
	<view>
		<view class="header_Box">
			<view class="search_Box">
				<image class="search_icon" src="../../static/shangcheng/search.png"></image>
				<text class="partingLine"></text>
				<text class="search">请输入关键词进行搜索</text>
			</view>
			<view class="selectBox">
				<view class="smallBox" v-for="(item,index) in selectData" :key="index">
					<image class="selectimg" :src="item.selectimg"></image>
					<text class="selectFont">{{item.selectfont}}</text>
				</view>
			</view>
		</view>
		<image class="notice" src="../../static/shangcheng/huodong.png"></image>
		<view class="main">
			<view class="water-item" v-for="(item,index) in infoData" :key="index" @click="godetails(item)">
				<image class="img" :src="item.img"></image>
				<h3 class="name diandiandian">{{item.name}}</h3>
				<view class="fotter">
					<text class="pingfen">{{item.pingfen}}<text class="pfFont">分</text></text>
					<view class="pinjia diandiandian">
						{{item.pinjia}}
					</view>
					<text class="money"><text>￥</text>{{item.monry}}</text>
					<text class="xiaoshou">销售量:{{item.xiaoshou}}</text>
				</view>
			</view>
		</view>
		<div id="loading" v-if="loading">
			<span class="bounce bounce1"></span>
			<span class="bounce bounce2"></span>
			<span class="bounce bounce3"></span>
		</div>
		<div v-if="!hasMore" class="No_more">没有更多数据了</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				hasMore: true,
				selectData: [{
					selectimg: '../../static/shangcheng/meishi.png',
					selectfont: '美食'
				}, {
					selectimg: '../../static/shangcheng/jiudian.png',
					selectfont: '酒店'
				}, {
					selectimg: '../../static/shangcheng/fuzhaung.png',
					selectfont: '服装'
				}, {
					selectimg: '../../static/shangcheng/shuma.png',
					selectfont: '数码'
				}, {
					selectimg: '../../static/shangcheng/jiazhuang.png',
					selectfont: '家装'
				}, {
					selectimg: '../../static/shangcheng/yule.png',
					selectfont: '娱乐'
				}, {
					selectimg: '../../static/shangcheng/qiche.png',
					selectfont: '汽车'
				}, {
					selectimg: '../../static/shangcheng/shenxian.png',
					selectfont: '生鲜'
				}, {
					selectimg: '../../static/shangcheng/fangchan.png',
					selectfont: '房产'
				}, {
					selectimg: '../../static/shangcheng/gengduo.png',
					selectfont: '更多'
				}],
				infoData: [{
					img: "../../static/shangcheng/chanping.png",
					name: 'Gucci印花兜帽卫衣',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}, {
					img: "../../static/shangcheng/chanping.png",
					name: 'Gucci印花兜帽卫衣',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}, {
					img: "../../static/shangcheng/chanping.png",
					name: '男道春装新款人物头像印花套头卫衣男士连帽外套',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}, {
					img: "../../static/shangcheng/chanping.png",
					name: '男道春装新款人物头像印花套头卫衣男士连帽外套',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}, {
					img: "../../static/shangcheng/chanping.png",
					name: '男道春装新款人物头像印花套头卫衣男士连帽外套',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}, {
					img: "../../static/shangcheng/chanping.png",
					name: '男道春装新款人物头像印花套头卫衣男士连帽外套',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}, {
					img: "../../static/shangcheng/chanping.png",
					name: '男道春装新款人物头像印花套头卫衣男士连帽外套',
					pingfen: '4.8',
					pinjia: '卫衣质量特别好,价格卫衣质量特别好,价格',
					manjian: '满八十减二十',
					monry: '108.90',
					xiaoshou: '9528',
				}]
			}
		},
		methods: {
		godetails(item){
			uni.navigateTo({
				url:"../product_details/product_details"
			})
		},
		},
		// 上拉加载
		onPullDownRefresh:function(){
			        setTimeout(function () {
			            uni.stopPullDownRefresh();  //停止下拉刷新动画
			        }, 1000);
		  uni.showToast({
		  	title: "刷新成功"
		  })
		 },
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
	.header_Box {
		width: 750rpx;
		height: 491rpx;
		background: url(../../static/shangcheng/banner.png) no-repeat;
		background-size: 750rpx 491rpx;
		margin-top: var(--status-bar-height);
	}

	.search_Box {
		width: 680rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 0.5;
		border-radius: 20rpx;
		position: relative;
		top: 20rpx;
		left: 35rpx;
	}

	.search_icon {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		top: 21rpx;
		left: 20rpx;
	}

	.partingLine {
		display: block;
		width: 2rpx;
		height: 20rpx;
		border-left: 2rpx solid #666666;
		position: absolute;
		top: 24rpx;
		left: 60rpx;
	}

	.search {
		font-size: 26rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 16rpx;
		left: 76rpx;
	}

	.selectBox {
		width: 680rpx;
		height: 259rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.2);
		border-radius: 20rpx;
		position: relative;
		top: 280rpx;
		left: 35rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.smallBox {
		width: 130rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.selectimg:nth-child(1) {
		width: 46rpx;
		height: 44rpx;
		position: relative;
		top: -20rpx;
	}

	.selectimg:nth-child(2) {
		width: 42rpx;
		height: 47rpx;
	}

	.selectimg:nth-child(3) {
		width: 50rpx;
		height: 40rpx;
	}

	.selectimg:nth-child(4) {
		width: 46rpx;
		height: 36rpx;
	}

	.selectimg:nth-child(5) {
		width: 38rpx;
		height: 42rpx;
	}

	.selectimg:nth-child(6) {
		width: 48rpx;
		height: 48rpx;
	}

	.selectimg:nth-child(7) {
		width: 52rpx;
		height: 38rpx;
	}

	.selectimg:nth-child(8) {
		width: 40rpx;
		height: 43rpx;
	}

	.selectimg:nth-child(9) {
		width: 44rpx;
		height: 40rpx;
	}

	.selectimg:nth-child(10) {
		width: 40rpx;
		height: 40rpx;
	}

	.selectFont {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		bottom: 15rpx;
	}

	.notice {
		width: 680rpx;
		height: 150rpx;
		margin-top: 150rpx;
		margin-left: 35rpx;
	}

	.main {
		width: 680rpx;
		margin-left: 35rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.water-item {
		width: 330upx;
		border-radius: 12upx;
		overflow: hidden;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		position: relative;
		background-color: #FFFFFF;
	}

	.img {
		width: 100%;
		height: 325rpx;
		position: relative;
		top: -40rpx;
	}

	.name {
		width: 100%;
		font-size: 29rpx; 
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: #808080;
		line-height: 40rpx;
		position: relative;
		top: -40rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.fotter {
		width: 327rpx;
		height: 160rpx;
		position: relative;
		top: -30rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.pingfen {
		font-size: 30rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(255,59,48,1);
		position: absolute;
		bottom: 7rpx;
		right: 10rpx;
	}

	.pfFont {
		font-size: 28rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(255,59,48,1);
		position: relative;
		left: 10rpx;
	}

	.pinjia {
		width: 321rpx;
		height: 30rpx;
		position: absolute;
		top: 60rpx;
		right: 0rpx;
		font-size: 24rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}
	.money {
		font-size: 30rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(255,59,48,1);
		position: absolute;
		top: 7rpx;
		left: 10rpx;
		
	}

	.xiaoshou {
		font-size: 24rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		top: 120rpx;
	}
</style>
